<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :title="title"
    align-center
    draggable
    width="80%"
    style="border-radius: 10px; padding: 5px 10px">
    <el-table :data="tableData">
      <el-table-column prop="empName" label="被考核人" />
      <el-table-column prop="name" label="提成考核"  />
      <el-table-column prop="target1" label="条目" width="150" />
      <el-table-column prop="inTarget1" label="/￥"  width="100" />
      <el-table-column prop="target2" label="条目" width="150" />
      <el-table-column prop="inTarget2" label="/￥"  width="100" />
      <el-table-column prop="result" label="结算/￥"  />
    </el-table>
    <el-form
      :model="tableData"
      label-width="120px"
      class="demo-dynamic"
      size="large"
      style="margin: 20px"
    >
      <el-form-item label="修正值">
        <el-input v-model="form.correctedValue" style="width: 250px" />
      </el-form-item>
      <el-form-item>
        
        <el-button style="width: 150px" type="primary" @click="submitForm"
          >提交</el-button
        >
        <el-button style="width: 150px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, onBeforeMount, reactive, defineProps, defineEmits,watch} from "vue";
import {reAdd} from '@/api/empKpi'
import { ElMessage } from "element-plus";

const dialogFormVisible = ref(true);
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    required: true,
  },
  select: {
    type: Array,
    required: true, 
  },
  update: {
    type: Function,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
});

const tableData = ref([])
const form=reactive({
  id:"",
  correctedValue:0,
  empId:""
})
watch(props, (newValue, oldValue) => {
  tableData.value.splice(0,tableData.value.length)
  tableData.value.push(newValue.select)
  form.id=newValue.select.empKpiId;
  form.correctedValue=newValue.select.correctedValue
  form.empId=newValue.select.empId
},{ deep: true });   

const submitForm = () => {
    reAdd(form).then(data=>{
      if (data.code == 200) {
        ElMessage({
          message: "修正成功",
          type: "success",
        });
        props.update();
        props.close()
      }
    })
};

const onClose=()=>{
  props.close()
}
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>
